import type {IColumnsOption} from 'vc';
import {
  INDEX,
} from '@/utils/tableColumn';
import {toBondDetail, toF9} from '@/utils';

export function useTable() {
  const columns = ref<IColumnsOption[]>([
    {...INDEX},
    {
      field: 'bondShortName',
      title: '债券名称',
      width: 270,
      fixed: 'left',
      headerAlign: 'center',
      sortBy: 'bondShortName',
      slots: {
        default: ({row}) => {
          const content = row.highlight?.bondShortName ? row.highlight?.bondShortName : row.bondShortName;
          return <div>
            <a title={row.bondShortName} class="companyName"
               onClick={() => toBondDetail(row.id)}
               v-html={content}>

            </a>
            {row.expired ? <span class="bondTypeLabel"
                                 style={'color:#fff;background:#fb9196'}>已过期 </span> : ''}
          </div>;

        }
      }
    },
    {
      field: 'issuingDate',
      title: '发行起始日',
      align: 'center',
      sortable: true,
      width: 110,
      sortBy: 'issuingDate'
    },
    {
      width: 200,
      field: 'attachments',
      title: '绿债口径',
      // sortable: true,
      slots: {
        default: ({row}) => {
          if (row.labels?.length === 0) {
            return '-';
          }
          return row?.labels?.map((item) => {
            return (
              <span class="bondTypeLabel"
                    style={'color:' + item.color + ';background:' + item.bgColor}>
                {item.name}
              </span>
            );
          });
        }
      }
    },
    {
      field: 'greenProjectClassifications',
      title: '绿债分类',
      // sortable: true,
      align: 'center',
      width: 200,
      slots: {
        default: ({row}) => {
          if (row.greenProjectClassifications && row.greenProjectClassifications.length > 0) {
            return <span
              style="overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;">{row.greenProjectClassifications.join('、')}</span>
          } else {
            return <span>-</span>
          }
        }
      },
      showOverflow: 'title'
    },
    {
      field: 'issuingScale',
      title: '发行规模',
      align: 'center',
      sortable: true,
      sortBy: 'issuingScale',
      width: 180,
      formatter: ({row}) => {
        return row.issuingScale ? row.issuingScale + '亿' : '-';
      }
    },
    {
      field: 'couponRateDisplay',
      title: '票面利率',
      align: 'center',
      sortable: true,
      sortBy: 'couponRate',
      width: 180,
      formatter: ({row}) => {
        return row.couponRateDisplay ? row.couponRateDisplay + '%' : '-';
      }
    },
    {
      field: 'certificateAuthority',
      title: '募资用途',
      align: 'center',
      // sortable: true,
      width: 180,
      slots: {
        default: ({row}) => {
          if (row.projectFundRateList && row.projectFundRateList.length > 0) {
            return (
              <div>
                <a onClick={() => showUserMoneyFn(row)}>查看</a>
                <br/>
              </div>)

          } else {
            return (<span>-</span>)
          }

        }
      }
    },
    {
      field: 'companyName',
      title: '发行人',
      // sortable: true,
      width: 260,
      headerAlign: 'center',
      sortBy: 'companyName',
      slots: {
        default: ({row}) => {
          const content = row.highlight?.companyName ? row.highlight?.companyName : row.companyName;
          if (row.companyId) {
            return <a title={row.companyName} class="companyName"
                      onClick={() => toF9(row.companyId)}
                      v-html={content}></a>;
          } else {
            return <span title={row.companyName || ''} v-html={content || '-'}></span>;
          }
        }
      }
    },
  ]);

  // 募资用途弹窗
  const showEchartsDialog = ref(false);
  const echartsDialogData = ref([]);

  const showUserMoneyFn = (data) => {
    console.log(data);
    showEchartsDialog.value = true;
    echartsDialogData.value = data;
  };

  return {
    columns,
    showEchartsDialog,
    echartsDialogData
  };
}
